<html lang='zh-CN'>
<head>
<meta charset='utf-8'>
	<style>
		.tab {
			width: 978px;
			margin: 100px auto;
		}
		
		.tab-list{
			height: 40px;
			border 1px solid #ccc;
			background-color: #f1f1f1;
		}
		
		li {
			list-style-type: none;
		}
		
		.tab-list li{
			float: left;
			height: 40px;
			line-height: 40px;
			padding:0 20px;
			text-align: center;
			cursor: pointer;
			
		}
		
		.tab-list .current {
			background-color: red;
			color: #fff;
		}
		
	</style>
</head>

<body>
	<div class='tab'>
		<ul class='tab-list'>
			<li class='current'>商品介绍</li>
			<li>用户评价</li>
			<li>厂家说明</li>
		</ul>
		<div class='content'>
			<p>Product introduction</p>
			<p style='display:none'>User assessment</p>
			<p style='display:none'>Vendor remarks</p>
		</div>
	</div>
</body>

<script>
	var tabList = document.querySelector('.tab-list').getElementsByTagName('li');
	var detail = document.querySelector('.content').getElementsByTagName('p');
	console.log(tabList);
	for ( var i=0; i<tabList.length; i++) {
		tabList[i].setAttribute('index',i);
		tabList[i].onclick = function () {
			for (var j=0; j<tabList.length; j++) {
				tabList[j].className = '';
				detail[j].style.display = 'none';
			}
			
			this.className = 'current';
			detail[this.getAttribute('index')].style.display = 'block';
		}
	}
</script>
</html>